<template>
    <div class="login">
        <div class="login_box_main">
            <el-row type="flex" justify="center">
                <el-form class=".login_box" ref="loginForm" :model="userDTO" :rules="rules" status-icon
                         label-width="80px"
                         style="margin-left: -20px">
                    <h3 style="margin-left: 30px">注册账号</h3>
                    <hr>
                    <el-form-item label="姓名" prop="username">
                        <el-input type="text" placeholder="请输入姓名" v-model="userDTO.username"/>
                    </el-form-item>
                    <el-form-item label="学号" prop="userid">
                        <el-input type="text" placeholder="请输入学号" v-model="userDTO.userid"/>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="userDTO.sex" placeholder="请选择性别" prop="sex">
                            <el-option v-for="city in sexs" :label="city.name" :value="city.name"
                                       :key="city.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="userDTO.campus" placeholder="请选择校区" clearable="" prop="Campus">
                            <el-option v-for="city in citys" :label="city.name" :value="city.name"
                                       :key="city.id"></el-option>
                        </el-select>
                        <el-select v-model="userDTO.academy" placeholder="请选择学院" clearable="" prop="academy">
                            <el-option v-for="city in citys02" :label="city.name" :value="city.name"
                                       :key="city.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱">
                        <el-input v-model="userDTO.email" placeholder="请输入qq邮箱" style="width: 200px"
                                  type="email"></el-input>
                        <el-button style="margin-left: 50px;width: 120px;margin-left: 5px" :disabled="disable"
                                   v-loading.fullscreen.lock="fullscreenLoading"
                                   :class="{ codeGeting:isGeting }" type="success" @click="Send();openFullScreen1()"
                                   icon="el-icon-upload">
                            {{ getCode }}
                        </el-button>
                    </el-form-item>
                    <el-form-item prop="Captcha" label="验证码">
                        <el-input v-model="Captcha" placeholder="请输入邮箱验证码"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="userDTO.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="twopassword" label="确认密码">
                        <el-input v-model="twopassword" show-password placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-form-item prop="code">
                            <el-col :span="12">
                                <el-input v-model="Imagecaptcha" placeholder="验证码" auto-complete="off"
                                          style="width: 150px"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <!--加载验证码-->
                                <img style="width:130px; height:39px;border-radius: 5px" :src="imgPath"
                                     @click="codefresh"
                                     alt="验证码"/>
                            </el-col>
                        </el-form-item>
                        <el-button style="margin-left: 10px" type="primary" @click="doRegister()">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
import {getCaptcha, getCheck, getEmail, postUpdate, save, selectEmail} from "@/views/register/register";
import img from "@/assets/images/userwoman.jpg";

export default {
    name: "login",
    data() {
        return {
            //不显示加载
            fullscreenLoading: false,
            //性别选择
            sexs: [{
                id: '男',
                name: '男'
            },
                {
                    id: '女',
                    name: '女'
                },
            ],
            //下拉单选框属性
            citys: [{
                id: 1,
                name: '仓山校区'
            },
                {
                    id: 2,
                    name: '旗山校区'
                },
                {
                    id: 3,
                    name: '海口校区'
                },

            ],
            citys02: [{
                id: 1,
                name: '数字信息工程学院'
            },
                {
                    id: 2,
                    name: '人文与管理学院'
                }, {
                    id: 3,
                    name: '化学与生物技术学院'
                }, {
                    id: 4,
                    name: '智能制造学院'
                }, {
                    id: 5,
                    name: '医护学院'
                }, {
                    id: 6,
                    name: '学前教育学院'
                }, {
                    id: 7,
                    name: '外语外贸学院'
                }, {
                    id: 8,
                    name: '小学教育学院'
                }, {
                    id: 9,
                    name: '艺术学院'
                }
            ],
            id: null,
            getCode: '获取验证码',
            isGeting: false,
            count: 60,
            disable: false,
            imgPath: null,
            emailNum: null,
            twopassword: "",
            //验证码
            Imagecaptcha: null,
            //邮箱验证码
            Captcha: "",
            userDTO: {
                avatar: '',
                username: "",
                userid: '',
                email: null,
                password: "",
                //所选学院
                academy: '',
                //所选校区
                campus: '',
                //性别
                sex: ''
            },
            rules: {
                sex: [
                    {required: true, message: '请选择性别', trigger: 'blur'},
                ],
                username: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                ],
                Campus: [{required: true, message: '请选择校区', trigger: 'blur'},],
                academy: [{required: true, message: '请选择学院', trigger: 'blur'},],
                userid: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 10, max: 10, message: '长度 10 个字符', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: "请输入邮箱", trigger: "blur"},
                    {
                        validator: function (rule, value, callback) {
                            if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
                                callback(new Error("请输入正确的邮箱!!!!!"));
                            } else {
                                //校验通过
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 5, max: 11, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                ],
            }
        };
    },
    created() {
        // console.log($);
        // console.log("1111");
    },
    methods: {
        //点击显示加载
        openFullScreen1() {
            this.fullscreenLoading = true;
        },
        getVerifyCode() {
            var countDown = setInterval(() => {
                if (this.count < 1) {
                    this.isGeting = false;
                    this.disable = false;
                    this.getCode = '获取验证码';
                    this.count = 60;
                    clearInterval(countDown);
                } else {
                    this.isGeting = true;
                    this.disable = true;
                    this.getCode = this.count-- + 's后重发';
                }
            }, 1000);
        },
        //从后端调出图片验证码
        codefresh() {
            this.imgPath = this.imgPath + "?" + Math.random();
        },
        //封装为Uint8Array格式
        dataURLtoUint8Array(dataURL) {
            var byteString = atob(dataURL.split(',')[1]);
            var arr = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                arr[i] = byteString.charCodeAt(i);
            }
            return arr;
        },
        // 发送邮箱
        Send() {
            if (this.userDTO.email !== null && /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.userDTO.email) == true) {
                getEmail(this.userDTO.email).then((res) => {
                    console.log(res)
                    if (res.succeed === true) {
                        // console.log(res.result)
                        this.$message.success("邮箱发送成功")
                        this.$store.state.temporaryemail = this.userDTO.email
                        this.emailNum = res.result
                        this.fullscreenLoading = false;
                        this.getVerifyCode()
                    } else {
                        this.fullscreenLoading = false
                        console.log("发送失败！！")
                    }
                })
            } else {
                this.fullscreenLoading = false
                this.$message.error("请输入正确的邮箱格式!!")
            }
        },
        doRegister() {
            if (!this.userDTO.userid || this.userDTO.userid.length !== 10) {
                this.$message.error("请输入完整信息！");
                return;
            }
            if (!this.Captcha) {
                this.$message.error("请输入验证码！");
                return;
            } else if (this.Captcha != this.emailNum) {
                this.$message.error("请输入正确的验证码！");
                return;
            } else if (!this.userDTO.campus) {
                this.$message.error("请选择校区！");
                return;
            } else if (!this.userDTO.academy) {
                this.$message.error("请选择学院！");
                return;
            } else if (!this.userDTO.sex) {
                this.$message.error("请选择性别！");
                return;
            } else if (!this.userDTO.email) {
                this.$message.error("请输入邮箱！");
                return;
            } else if (!this.userDTO.password) {
                this.$message.error("请输入密码！");
                return;
            } else if (this.userDTO.password != this.twopassword) {
                this.$message.error("两次输入密码不匹配，请重新输入！");
                return;
            } else {
                if (this.$store.state.temporaryemail != this.userDTO.email) {
                    this.$message.error('邮箱已改变！！，请重新获取验证码')
                } else {
                    getCheck(this.Imagecaptcha).then(res => {
                            console.log(res.data)
                            if (res.data === true) {
                                selectEmail(this.userDTO.email).then(res => {
                                    console.log(res)
                                    if (res === 1) {
                                        //根据所选性别上传头像
                                        if (this.userDTO.sex === '女') {
                                            let img =  require("@/assets/images/userwoman.jpg")
                                            this.userDTO.avatar = new Blob([img], {type: 'image/jpeg'})
                                            // this.userDTO.avatar=this.dataURLtoUint8Array(this.userDTO.avatar)
                                        }else{
                                            let img =  require("@/assets/images/userman.png")
                                            this.userDTO.avatar = new Blob([img], {type: 'image/jpeg'})
                                            // this.userDTO.avatar=this.dataURLtoUint8Array(this.userDTO.avatar)
                                        }
                                        let formData = new FormData();
                                        formData.append('avatar',this.userDTO.avatar,'avatar');
                                        formData.append('username',this.userDTO.username);
                                        formData.append('userid',this.userDTO.userid);
                                        formData.append('email',this.userDTO.email);
                                        formData.append('password',this.userDTO.password);
                                        formData.append('academy',this.userDTO.academy);
                                        formData.append('campus',this.userDTO.campus);
                                        formData.append('sex',this.userDTO.sex);
                                        save(formData).then(res => {
                                            // console.log("输出response.data", res.data);
                                            // console.log("输出response.data.status", res.data.status);
                                            if (res.succeed === true) {
                                                this.$router.push({path: "/login"});
                                                this.$message.success("注册成功！已自动返回登录页面")
                                            } else {
                                                this.$message.error("注册失败！，该学号已被注册！")
                                            }
                                        })
                                    } else {
                                        this.$message.error("该邮箱已被注册！！")
                                    }
                                    /*   else {
                                                   this.id = res.data[0].id
                                                   console.log("获取到的id" + this.id)
                                                   postUpdate(this.userDTO).then(res => {
                                                       this.$message.success('修改成功，3秒后返回登录页面')
                                                       this.$router.replace({path: "/"});
                                                   })
                                               }*/
                                })
                            } else {
                                this.$message.error("图形验证码输入错误！！")
                            }
                        }
                    )
                }
            }
        }
    },
    beforeMount() {
      // this.imgPath = "http://localhost:9999/captcha"
      this.imgPath = "http://111.229.186.198:8081/captcha"
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    height: auto;
    max-width: 100%
}

.login_main {
    background-color: rgba(51, 85, 121, 0);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    .login_box {
        display: flex;
        border: 15px solid rgba(51, 85, 121, 0);
        height: auto;
        max-width: 100%;
        margin: 250px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
        text-align: center;

        /*   &::after,
           &::before {
             position: absolute;
             content: "";
             left: 50%;
             width: 15%;
             height: 300%;
             top: -100%;
             transform: translate(-50%, -50%);
             background-image: conic-gradient(transparent, transparent, transparent, #440ab8);
             animation: rotate 5s linear infinite;
           }

           &::after {
             background-image: conic-gradient(transparent, transparent, transparent, #d04310);
             animation-delay: -2.5s;
           }*/
        /*
            @keyframes rotate {
              from {
                transform: rotate(0);
              }
              to {
                transform: rotate(360deg);
              }
            }*/

        /*    .login_box_main {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: space-between;
              width: 99%;
              height: 98%;
              border-radius: 20px;
              background-color: rgba(51, 85, 121, 0.96);
              padding: 30px;
            }*/

        .form {

        }

        .login-title {
            text-align: center;
            margin: 0 auto 40px auto;
            color: #303133;
        }

    }
}
</style>
